<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">

<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta name="renderer" content="webkit"/>

    <title>物流管理系统后台</title>

    <!-- 引入公用部分 -->
    <script th:replace="common/head::static"></script>

    <link rel="shortcut icon" href="favicon.ico"/>
    <link href="css/bootstrap.min.css?v=3.3.6" rel="stylesheet"/>
    <link href="css/font-awesome.min.css?v=4.4.0" rel="stylesheet"/>
    <link href="css/animate.css" rel="stylesheet"/>
    <link href="css/style.css?v=4.1.0" rel="stylesheet"/>
    <style>
        ul {
            list-style: none
        }


    </style>

</head>

<body class="fixed-sidebar full-height-layout gray-bg"
      style="overflow:hidden">

<div id="wrapper">
    <!--左侧导航开始-->
    <nav class="navbar-default navbar-static-side" role="navigation">
        <div class="nav-close">
            <i class="fa fa-times-circle"></i>
        </div>
        <div class="sidebar-collapse">
            <ul class="nav" id="side-menu">
                <li class="nav-header">
                    <div class="dropdown profile-element">
                        <span  onmouseover="fn1('#photoLabel')" onmouseout="fn2('#photoLabel')" data-toggle="modal" data-target="#myModal">
                            <label id="photoLabel" style="margin: 34px 0 0px 5px; position: absolute;color: azure; display: none">点击更换头像</label>
                            <img alt="image"  class="img-circle" width="90px" height="90px" style=" margin: -15px 0px 0 0"  th:src="@{ ${loginUser.img} }"/>

                        </span>
                        <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                       <span class="clear">
                           <span class="block m-t-xs">
                            <strong class="font-bold" th:text="${loginUser.username}">xx</strong>
                          </span>
                          <span class="text-muted text-xs block" th:text="${session.roleName + '▼'}">
                             <b class="caret"></b>
                          </span>
						</span>
                        </a>
                        <ul class="dropdown-menu animated fadeInRight m-t-xs">
                            <li><a th:href="@{/setP assword}">修改密码</a></li>


                            <li class="divider"></li>
                            <li><a th:href="@{/logout}">安全退出</a></li>
                        </ul>
                    </div>

                    <div class="logo-element"> <strong class="font-bold" th:text="${loginUser.username}">xx</strong></div>
                </li>
                <li><a class="J_menuItem" th:href="@{/welcome}"><i
                        class="fa fa-home"></i> <span class="nav-label">主页</span></a></li>
                <li th:each="menu:${menulist}">
                    <a th:if="${menu.pid} == null " class="J_menuItem" th:href="${menu.url}">
                        <i class="fa" th:attrappend="class=${' ' + menu.icon}"></i>
                        <span class="nav-label" th:text="${menu.permissionName}">我的便签</span>
                    </a>
                    <ul th:each="child:${menulist}">
                        <li th:if="${menu.permissionId} == ${child.pid}">
                            <a class="J_menuItem" th:href="${child.url}">
                                <i class="fa" th:attrappend="class=${' ' + child.icon}"></i>
                                <span class="nav-label" th:text="${child.permissionName}">我的便签</span>
                            </a>
                        </li>
                    </ul>
                </li>


                <li><a class="J_menuItem" th:href="@{/introduction}"> <i
                        class="fa fa-bug"></i> <span class="nav-label">功能介绍</span>
                </a></li>


            </ul>
        </div>
    </nav>
    <!--左侧导航结束-->
    <!--右侧部分开始-->
    <div id="page-wrapper" class="gray-bg dashbard-1">
        <div class="row border-bottom">
            <nav class="navbar navbar-static-top" role="navigation"
                 style="margin-bottom: 0">
                <div class="navbar-header">
                    <a class="navbar-minimalize minimalize-styl-2 btn btn-primary "
                       href="#"><i class="fa fa-bars"></i> </a>

                </div>
                <ul class="nav navbar-top-links navbar-right">


                    <li class="dropdown hidden-xs"><a
                            class="right-sidebar-toggle" aria-expanded="false"> <i
                            class="fa fa-tasks"></i> 菜单
                    </a></li>
                </ul>
            </nav>
        </div>
        <div class="row content-tabs">
            <button class="roll-nav roll-left J_tabLeft">
                <i class="fa fa-backward"></i>
            </button>
            <nav class="page-tabs J_menuTabs">
                <div class="page-tabs-content">
                    <a href="javascript:;" class="active J_menuTab"
                       th:src="@{/welcome}">首页</a>
                </div>
            </nav>
            <button class="roll-nav roll-right J_tabRight">
                <i class="fa fa-forward"></i>
            </button>
            <div class="btn-group roll-nav roll-right">
                <button class="dropdown J_tabClose" data-toggle="dropdown">
                    关闭操作<span class="caret"></span>

                </button>
                <ul role="menu" class="dropdown-menu dropdown-menu-right">
                    <li class="J_tabShowActive"><a>定位当前选项卡</a></li>
                    <li class="divider"></li>
                    <li class="J_tabCloseAll"><a>关闭全部选项卡</a></li>
                    <li class="J_tabCloseOther"><a>关闭其他选项卡</a></li>
                </ul>
            </div>
            <a id="logouta" class="roll-nav roll-right J_tabExit"
               onclick="window.location='/logout'"><i
                    class="fa fa fa-sign-out"></i> 退出</a>
        </div>
        <div class="row J_mainContent" id="content-main">
            <iframe class="J_iframe" name="iframe0" width="100%" height="100%"
                    th:src="@{/welcome}" frameborder="0"></iframe>
        </div>
        <div class="footer"></div>
    </div>
    <!--右侧部分结束-->
    <!--右侧边栏开始-->
    <div id="right-sidebar">
        <div class="sidebar-container">

            <ul class="nav nav-tabs navs-2">

                <li class="active"><a data-toggle="tab" href="#tab-1"> <i
                        class="fa fa-gear"></i> 主题
                </a></li>
                <li class=""><a data-toggle="tab" href="#tab-2"> 通知 </a></li>

            </ul>

            <div class="tab-content">
                <div id="tab-1" class="tab-pane active">
                    <div class="sidebar-title">
                        <h3>
                            <i class="fa fa-comments-o"></i> 主题设置
                        </h3>
                        <small><i class="fa fa-tim"></i> 你可以从这里选择和预览主题的布局和样式。</small>
                    </div>
                    <div class="skin-setttings">
                        <div class="title">主题设置</div>
                        <div class="setings-item">
                            <span>收起左侧菜单</span>
                            <div class="switch">
                                <div class="onoffswitch">
                                    <input type="checkbox" name="collapsemenu"
                                           class="onoffswitch-checkbox" id="collapsemenu"/> <label
                                        class="onoffswitch-label" for="collapsemenu"> <span
                                        class="onoffswitch-inner"></span> <span
                                        class="onoffswitch-switch"></span>
                                </label>
                                </div>
                            </div>
                        </div>
                        <div class="setings-item">
                            <span>固定顶部</span>

                            <div class="switch">
                                <div class="onoffswitch">
                                    <input type="checkbox" name="fixednavbar"
                                           class="onoffswitch-checkbox" id="fixednavbar"/> <label
                                        class="onoffswitch-label" for="fixednavbar"> <span
                                        class="onoffswitch-inner"></span> <span
                                        class="onoffswitch-switch"></span>
                                </label>
                                </div>
                            </div>
                        </div>
                        <div class="setings-item">
                            <span> 固定宽度 </span>

                            <div class="switch">
                                <div class="onoffswitch">
                                    <input type="checkbox" name="boxedlayout"
                                           class="onoffswitch-checkbox" id="boxedlayout"/> <label
                                        class="onoffswitch-label" for="boxedlayout"> <span
                                        class="onoffswitch-inner"></span> <span
                                        class="onoffswitch-switch"></span>
                                </label>
                                </div>
                            </div>
                        </div>
                        <div class="title">皮肤选择</div>
                        <div class="setings-item default-skin nb">
								<span class="skin-name "> <a href="#" class="s-skin-0">
										默认皮肤 </a>
								</span>
                        </div>
                        <div class="setings-item blue-skin nb">
								<span class="skin-name "> <a href="#" class="s-skin-1">
										蓝色主题 </a>
								</span>
                        </div>
                        <div class="setings-item yellow-skin nb">
								<span class="skin-name "> <a href="#" class="s-skin-3">
										黄色/紫色主题 </a>
								</span>
                        </div>
                    </div>
                </div>
                <div id="tab-2" class="tab-pane">

                    <div class="sidebar-title">
                        <h3>
                            <i class="fa fa-comments-o"></i> 最新通知
                        </h3>

                    </div>

                    <div>

                        <div class="sidebar-message" th:each="notice:${noticelist}">
                            <a href="#">
                                <div class="pull-left text-center">
                                    <img alt="image" class="img-circle message-avatar"
                                         th:src="@{'img/'+ ${notice.avatar}+ '.jpg'}"/>
                                    <div class="m-t-xs" th:text="${notice.sendUsername}"></div>
                                </div>
                                <div class="media-body" th:utext="${notice.message}"></div>

                            </a>
                        </div>

                    </div>

                </div>

            </div>

        </div>
    </div>
    <!--右侧边栏结束-->


    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">更换头像</h4>
                </div>
                <form class="layui-form"  method="post" enctype="multipart/form-data" id="photoForm" >
                <div class="modal-body">
                    <div>
                        <div style="position: relative;border: 5px solid lightblue;width: 150px;height:150px;margin: 5px auto;border-radius: 50%;"  onmouseover="fn1('#photoLabel2')" onmouseout="fn2('#photoLabel2')">
                            <label id="photoLabel2"  style="    margin: 50px 0 0px 4px; position: absolute;font-size: 22px;color: azure;display: none">点击更换头像</label>
                            <img th:src="@{${loginUser.img}}" alt="选择并上传头像" id="avatar_img"
                                 style="width: 140px;height: 140px;left:0;top: 0;border-radius: 50%;"/>
                            <input type="file" id="avatar_file" name="avatar_file"
                                   style="width: 100%;height:100%;opacity: 0;position: absolute;left:0;top: 0;"/>
                        </div>
                        <br/>
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" id="close" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" onclick="updatePhoto()">上传</button>
                </div>
                </form>
            </div>
        </div>
    </div>

</div>

<!-- 全局js -->
<script src="js/jquery.min.js?v=2.1.4"></script>
<script src="js/bootstrap.min.js?v=3.3.6"></script>
<script src="js/plugins/metisMenu/jquery.metisMenu.js"></script>
<script src="js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
<script src="js/plugins/layer/layer.min.js"></script>


<script th:src="@{/js/lin/index.js}"></script>

<!-- 自定义js -->
<script src="js/hplus.js?v=4.1.0"></script>
<script type="text/javascript" src="js/contabs.js"></script>

<!-- 第三方插件 -->
<script src="js/plugins/pace/pace.min.js"></script>

<link rel="stylesheet" href="layui/css/layui.css" media="all">
<script src="layui/layui.js" charset="utf-8"></script>

<script src="bower_components/vue/dist/vue.js"></script>

</body>

<script>
    layui.use('upload', function() {
        var $ = layui.jquery
            , upload = layui.upload;

    });

    // 头像预览
    $("#avatar_file").change(function () {
        // 获取上传文件对象
        var file = $(this)[0].files[0];
        // 上传时提交到服务器端的数据，上传文件的数据必须通过new FormData()来创建数据对象
        let data = new FormData();
        //添加到上传的数据对象中的属性名称必须与服务端接收的参数保持一致
        data.append('imageFile',file);
        //执行上传
        //处理上传的$.ajax()中必须配置  processData和contentType
        $.ajax({
            url:'/upload-image',
            data: data,
            type:'post',
            processData: false,//
            contentType: false,
            dataType:'json',
            success:function (json) {
                if(json.state == 2000){
                    console.log(json.data);
                    //用来表示插入节点
                    $('#avatar_img').attr('src', json.data);
                } else{
                    swal("错误", data.message, "error");
                }
            }

        })
    });


    function updatePhoto(){
        console.log($('#avatar_img').attr('src'));
        var img=$('#avatar_img').attr('src');
        let data =
            {
                'img':img,
            };
        console.log(data);

        $.ajax({
            url: "/updateImgById",
            type: "POST",
            data: data,
            success: function (data) {
                console.log(data);
                if (data.state == 2000) {
                    $('#myModal').modal('hide');
                    window.location.reload()

                } else {
                    swal("错误", data.message, "error");
                }

            },
            error: function () {
                swal("错误", "出现错误，请重试", "error");
            }
        });
    }
    function fn1(id){
            $(id).css('display','block');
    }
    function fn2(id){
        $(id).css('display','none');
    }







</script>

</html>
